<script>
// 引出组合式api
import { computed, toRefs } from "vue";

// pinia状态管理
import { useBookcase } from "../../stores/bookcase.js";
import { useRouter } from "vue-router";

export default {
  // 接收参数
  props: ["userinfo", "keyword"],
  setup(props) {
    // 使用pinia
    const bookcaseStore = useBookcase();

    // 使用选项式api
    const router = useRouter();

    // 结构参数
    let { userinfo, keyword } = toRefs(props);

    // 选中的数组
    let bookChecked = computed({
      get: () => bookcaseStore.bookChecked,
      set: (v) => (bookcaseStore.bookChecked = v),
    });

    // 选中状态切换
    let toggleFun = (BookId) => {
      if (bookChecked.value.includes(BookId))
        bookChecked.value = bookChecked.value.filter(
          (_BookId) => _BookId != BookId
        );
      else bookChecked.value.push(BookId);
      caseDelConEve();
    };

    // 历史记录的删除按钮高亮事件
    let caseDelConEve = () => {
      // 长度大于0长高亮
      let caseDelCon = bookChecked.value.length > 0;
      bookcaseStore.$patch({ caseDelCon });
    };

    // 读书的方法
    let read = (BookId) => {
      // console.log(BookId);
      router.push("/BookRead/" + BookId);
    };

    // 详情页跳转
    let details = (id) => {
      router.push({ path: "/Details", query: { id: id } });
    };

    return {
      bookChecked, // 选中的数组
      details, // 详情页跳转方法
      read, // 读书的方法
      flexMain: computed(() =>
        userinfo.value.bookcase.find((item) => item.recent)
      ),
      flexList: computed(() =>
        userinfo.value.bookcase.filter((item) => !item.recent)
      ),
      blockList: computed(() => userinfo.value.bookcase),
      searchKeyword: computed(() => keyword.value),
      toggleFun, //切换选中
      isFlex: computed(() => bookcaseStore.isFlex),
      isEdit: computed(() => bookcaseStore.isEdit),
    };
  },
};
</script>

<template>
  <div class="BookCaseMain">
    <transition name="van-slide-left">
      <div class="bookcase" v-if="isFlex">
        <div class="bookcase-box" @click="details(flexMain.BookId)">
          <div class="left">
            <div class="img">
              <img :src="flexMain.BookImage" alt="" />
            </div>
          </div>

          <div class="right">
            <div class="book-name">{{ flexMain.BookName }}</div>
            <div class="book-update-progress text-ellipsis-1">
              更新至 第{{ flexMain.latest }}章 {{ flexMain.latestTitle }}
            </div>
            <div class="book-reading-progress text-ellipsis-1">
              正在读 第{{ flexMain.reading }}章 {{ flexMain.readingTitle }}
            </div>
            <div class="progress">
              进度
              <van-progress
                :percentage="(flexMain.reading / flexMain.latest) * 100"
                stroke-width="4"
                pivot-color="#e3edef"
                color="#fb4b6b"
                :show-pivot="false"
              />
              {{ ((flexMain.reading / flexMain.latest) * 100).toFixed(1) }}%
            </div>
            <div class="btn">
              <button @click.stop="read(flexMain.BookId)">继续阅读</button>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <div class="books-flex" v-if="isFlex && flexList">
      <div
        class="book-item"
        v-for="item in flexList"
        :key="item.BookId"
        @click="details(item.BookId)"
        v-show="
          item.BookName.includes(searchKeyword) ||
          item.Author.includes(searchKeyword)
        "
      >
        <div :class="['img', { con: item.isEnd }]">
          <img :src="item.BookImage" alt="" />
        </div>
        <div class="book-name text-ellipsis-1">{{ item.BookName }}</div>
        <div
          :class="[
            'book-reading-progress',
            'text-ellipsis-1',
            { con: !item.reading },
          ]"
        >
          {{ item.reading ? `读至 第${item.reading}章` : "未读" }}
        </div>
      </div>
    </div>

    <div :class="['book-block', { show: !isFlex }]">
      <div
        class="book-item"
        v-for="(item, i) in blockList"
        :key="item.BookId"
        @click="details(item.BookId)"
        v-show="
          item.BookName.includes(searchKeyword) ||
          item.Author.includes(searchKeyword)
        "
      >
        <div
          :class="[
            'checkbox',
            { show: isEdit },
            { checked: bookChecked.includes(item.BookId) },
          ]"
          @click.stop="toggleFun(item.BookId)"
        ></div>
        <div
          :class="['book-item-box', { show: !isFlex }, { edit: isEdit }]"
          :style="{
            'transition-delay': 0.1 * (i - 1) + 's',
          }"
        >
          <div :class="['img', { con: item.isEnd }]">
            <img :src="item.BookImage" alt="" />
          </div>
          <div class="right">
            <div class="book-name text-ellipsis-1">{{ item.BookName }}</div>
            <div class="book-author text-ellipsis-1">{{ item.Author }}</div>
            <div class="book-update-progress text-ellipsis-1">
              更新至 第{{ item.latest }}章 {{ item.latestTitle }}
            </div>
            <div
              :class="[
                'book-reading-progress',
                'text-ellipsis-1',
                { con: !item.reading },
              ]"
            >
              {{ item.reading ? `读至 第${item.reading}章` : "未读" }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="emtpy"
      v-if="
        isFlex
          ? !flexList.length
          : !flexMain ||
            (isFlex
              ? !flexList.some((o) => o.BookName.includes(searchKeyword)) &&
                !flexList.some((o) => o.Author.includes(searchKeyword))
              : !blockList.some((o) => o.BookName.includes(searchKeyword)) &&
                !blockList.some((o) => o.Author.includes(searchKeyword)))
      "
    >
      <img src="../../assets/img/none-book.png" alt="" />
    </div>
  </div>
</template>



<style lang="scss" scoped>
.BookCaseMain {
  .bookcase {
    padding: 0 30px;
    background: url(../../assets/img/book-bg-1.png) no-repeat center bottom;
    background-size: contain;
    height: 193px;

    .bookcase-box {
      display: flex;
      justify-content: space-between;
      // background-color: #fff;
      padding: 22px 16px 0;

      .left {
        .img {
          width: 100px;
          height: 132px;
          box-sizing: border-box;
          border: 1px solid rgba($color: #fb4876, $alpha: 0.2);
        }
      }

      .right {
        margin-left: 18px;
        width: calc(100% - 118px);

        .book-name {
          line-height: 26px;
          font-size: 18px;
          color: #131026;
          font-weight: bold;
        }

        .book-update-progress {
          line-height: 22px;
          color: #8e8d93;
          font-size: 12px;
          margin-top: 3px;
        }

        .book-reading-progress {
          font-size: 12px;
          color: #8e8d93;
          line-height: 22px;
        }

        .progress {
          display: flex;
          align-items: center;
          font-size: 12px;

          ::v-deep .van-progress {
            flex: 1;
            margin: 0 10px;
          }
        }

        .btn {
          margin-top: 6px;
          display: flex;
          flex-direction: row-reverse;

          button {
            padding: 0;
            border: 0;
            display: block;
            height: 28px;
            line-height: 28px;
            border-radius: 14px;
            padding: 0 12px;
            box-sizing: border-box;
            border: 1px solid #fb5664;
            background-image: linear-gradient(90deg, #fa727e, #fb4576);
            font-size: 12px;
            color: #fff;
          }
        }
      }
    }
  }
  .books-flex {
    display: flex;
    flex-wrap: wrap;
    padding: 0 16px;
    margin-top: 16px;
    .book-item {
      width: 100px;
      margin-right: calc((100% - 300px) / 2);
      margin-top: 16px;

      &:nth-child(3n) {
        margin-right: 0;
      }

      &:nth-child(-n + 3) {
        margin-top: 0;
      }

      .img {
        width: 100%;
        position: relative;

        &.con::after {
          content: "完结";
          font-size: 12px;
          position: absolute;
          bottom: 5px;
          right: 5px;
          display: block;
          padding: 0 5px;
          width: max-content;
          height: 18px;
          border-radius: 4px;
          line-height: 18px;
          color: rgba(255, 255, 255, 0.743);
          background-color: rgba($color: #000, $alpha: 0.4);
        }
      }

      .book-name {
        margin-top: 6px;
        line-height: 18px;
        font-size: 12px;
        color: #393743;
      }

      .book-reading-progress {
        line-height: 18px;
        font-size: 12px;
        color: #a9a8ac;
        width: max-content;

        &.con::after {
          content: "";
          position: relative;
          top: 2px;
          left: 0;
          display: inline-block;
          vertical-align: top;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background-color: #fd4e77;
        }
      }
    }
  }
  .book-block {
    height: 0;
    padding: 0;
    &.show {
      padding: 10px 0;
      height: auto;
    }
    .book-item {
      position: relative;
      margin-top: 16px;
      height: 100px;
      .book-item-box {
        display: flex;
        position: absolute;
        top: 0;
        // left: 0;
        width: 100%;
        height: 100%;
        padding: 0 16px;
        z-index: 10;
        box-sizing: border-box;

        // 过渡动画效果
        transition: all 0.3s ease;
        left: 100px;
        opacity: 0;

        &.show {
          left: 0;
          opacity: 1;
          transition-delay: 0s;
        }

        &.edit {
          z-index: 8;
          left: 26px;
          width: calc(100% - 26px);
        }
      }

      .checkbox {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        box-sizing: border-box;
        width: 100%;
        opacity: 0;
        z-index: 9;
        transition: all 0.3s ease;
        &.show {
          opacity: 1;
        }
        &::before {
          content: "";
          position: absolute;
          display: block;
          top: 0;
          bottom: 0;
          left: 20px;
          margin: auto;
          width: 8px;
          height: 8px;
          border: 4px solid #c0bfc6;
          border-radius: 50%;
        }
        &.checked::before {
          border-color: #fa727e;
        }
      }
      .img {
        width: 75px;
        height: 100px;
        box-sizing: border-box;
        border: 1px solid #fa727d5c;
        margin-right: 15px;
        position: relative;

        &.con::after {
          content: "完结";
          font-size: 12px;
          position: absolute;
          bottom: 5px;
          right: 5px;
          display: block;
          padding: 0 5px;
          width: max-content;
          height: 18px;
          border-radius: 4px;
          line-height: 18px;
          color: rgba(255, 255, 255, 0.743);
          background-color: rgba($color: #000, $alpha: 0.4);
        }
      }
      .right {
        width: calc(100% - 90px);
        height: 100px;
        overflow: hidden;

        .book-author {
          line-height: 24px;
          color: #9d9da6;
          font-size: 12px;
        }

        .book-name {
          line-height: 26px;
          color: #373744;
          font-size: 18px;
          font-weight: bold;
        }

        .book-update-progress {
          margin-top: 6px;
          line-height: 22px;
          color: #9d9da6;
          font-size: 12px;
        }

        .book-reading-progress {
          line-height: 22px;
          color: #9d9da6;
          font-size: 12px;
          &.con::after {
            content: "";
            position: relative;
            top: 4px;
            left: 0;
            display: inline-block;
            vertical-align: top;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #fd4e77;
          }
        }
      }
    }
  }

  .emtpy {
    padding-top: 10px;
    img {
      width: 210px;
      margin: 0 auto;
      display: block;
    }
  }
}
</style>